<template>
  <view class="add-car-page">
    <!-- 页面标题 -->
    <view class="page-title">添加车辆</view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 车辆类型 -->
      <view class="form-item">
        <text class="label">车辆类型</text>
        <picker mode="selector" :range="carTypes" @change="onCarTypeChange">
          <view class="picker">{{ selectedCarType || '请选择' }}</view>
        </picker>
      </view>

      <!-- 车辆型号 -->
      <view class="form-item">
        <text class="label">车辆型号</text>
        <picker mode="selector" :range="carModels" @change="onCarModelChange">
          <view class="picker">{{ selectedCarModel || '请选择' }}</view>
        </picker>
      </view>

      <!-- 车牌号码 -->
      <view class="form-item">
        <text class="label">车牌号码</text>
        <input
          v-model="licensePlate"
          placeholder="请输入您的车牌号"
          class="input"
        />
      </view>

      <!-- 车主姓名 -->
      <view class="form-item">
        <text class="label">车主姓名</text>
        <input
          v-model="ownerName"
          placeholder="请输入您的姓名"
          class="input"
        />
      </view>

      <!-- 电话号 -->
      <view class="form-item">
        <text class="label">电话号</text>
        <input
          v-model="phoneNumber"
          placeholder="请输入您的手机号"
          class="input"
        />
      </view>

      <!-- 照片上传 -->
      <view class="form-item">
        <text class="label">照片</text>
        <view class="upload-container" @click="uploadImage">
          <image
            v-if="carImage"
            :src="carImage"
            class="car-image"
            mode="aspectFill"
          />
          <view v-else class="upload-button">
            <text>上传车辆照片</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加按钮 -->
    <view class="add-button" @click="handleAddCar">
      <text>添加</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 车辆类型数据
const carTypes = ref(['轿车', 'SUV', 'MPV', '跑车', '货车']);
const selectedCarType = ref('');

// 车辆型号数据
const carModels = ref(['特斯拉 Model 3', '宝马 X5', '奥迪 A6', '奔驰 GLC', '丰田卡罗拉']);
const selectedCarModel = ref('');

// 表单数据
const licensePlate = ref('');
const ownerName = ref('');
const phoneNumber = ref('');
const carImage = ref('');

// 选择车辆类型
const onCarTypeChange = (event) => {
  selectedCarType.value = carTypes.value[event.detail.value];
};

// 选择车辆型号
const onCarModelChange = (event) => {
  selectedCarModel.value = carModels.value[event.detail.value];
};

// 上传照片
const uploadImage = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      carImage.value = res.tempFilePaths[0];
    },
  });
};

// 处理添加车辆
const handleAddCar = () => {
  if (!selectedCarType.value || !selectedCarModel.value || !licensePlate.value || !ownerName.value || !phoneNumber.value || !carImage.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    });
    return;
  }

  // 这里留空，后续对接接口
  console.log('添加车辆数据:', {
    carType: selectedCarType.value,
    carModel: selectedCarModel.value,
    licensePlate: licensePlate.value,
    ownerName: ownerName.value,
    phoneNumber: phoneNumber.value,
    carImage: carImage.value,
  });

  uni.showToast({
    title: '添加成功',
    icon: 'success',
  });

  // 清空表单
  selectedCarType.value = '';
  selectedCarModel.value = '';
  licensePlate.value = '';
  ownerName.value = '';
  phoneNumber.value = '';
  carImage.value = '';
};
</script>

<style scoped>
.add-car-page {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.form-item {
  margin-bottom: 20px;
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.picker {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ddd;
}

.input {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  border: 1px solid #ddd;
}

.upload-container {
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.upload-button {
  font-size: 14px;
  color: #666;
}

.car-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

.add-button {
  background-color: #409eff;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}

.add-button:active {
  background-color: #66b1ff;
}
</style>